<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="never" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/detail.css" />
  </head>
  <body>
    <header>
      <ul>
        <ol>
          <li><a href="">毛萌辉</a></li>
          <li><a href="">手机逛淘宝</a></li>
        </ol>
        <ol>
          <li><a href="./index.html">首页</a></li>
          <li><a href="">我的淘宝</a></li>
          <li><a href="">收藏夹</a></li>
          <li><a href="./list2.html">商品分类</a></li>
        </ol>
      </ul>
    </header>
    <div class="container"></div>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
      //1.通过tools里面封装的函数 获取地址栏的数据信息
      const valObj = myGetUrlValObj();
      console.log(valObj.id); //获取后用于传参携带数据 获取后端数据库数据 动态生成页面
      //2.发送请求 获取响应体数据
      const xhr = myPromiseJQueryAjax(
        "../server/goods_detail.php",
        "post",
        {
          goods_id: valObj.id,
        },
        "json"
      );
      xhr.then(function (res) {
        console.log(res);
        str = `<div class="detailBox">
        <div class="detailLeft">
            <div class="logoImg">
                <img class="media-object" src="${res.goods_big_logo}" alt="...">
                <div class="mask"></div>
            </div>
            <div class="glass" style="background-image:url(${res.goods_big_logo})"></div>
        </div>
        <div class="detailRight">
          <div class="infoTxt">
            ${res.goods_name}
          </div>
          <div class="price"><span>商品单价：</span> ￥${res.goods_price} 元</div>

          <div class="number">
            <button name="减" class="jain">-</button>
            <input class="num" type="text" value="1" />
            <button name="加" class="jia">+</button>
          </div>
          <p>
            <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
            <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
        </p>
        </div>
      </div>
      <div class="moreInfo">
        <ul>
          <li>店长推荐</li>
          <li>商品详情</li>
          <li>规格与包装</li>
          <li>更多评价</li>
        </ul>
        <div>
             ${res.goods_introduce}</div>
      </div>`;
        //将动态生成的页面 写入到div容器中
        $(".container").html(str);

        //3.给+ -按钮添加点击事件
        //页面内容是动态生成的 给父级标签添加点击事件
        //通过事件委托 来完成效果
        $(".container").click(function (e) {
          //判断点击的是减
          if (e.target.getAttribute("name") === "减") {
            //获取input中的数值 减1 之后赋值回来
            $(".num").val($(".num").val() - 1 < 1 ? 1 : $(".num").val() - 1);
          } else if (e.target.getAttribute("name") === "加") {
            //判断 大于等于库存 就等于库存
            $(".num").val(
              $(".num").val() - 0 + 1 > res.goods_number
                ? res.goods_number
                : $(".num").val() - 0 + 1
            );
          }
          //4.点击添加购物车
          else if (e.target.getAttribute("name") === "cart") {
            //判断用户是否是登录状态
            //如果没有登录 跳转页面 去 执行登录操作
            //获取cookie数据对象
            const cookieObj = myGetCookie();
            console.log(cookieObj); //login:1 是登录状态

            //没有登录的情况
            if (cookieObj.login !== "1") {
              //弹出提示框 点击确定 跳转登录页面
              if (window.confirm("您还未登录，点击确定跳转登录页面")) {
                window.location.href = `./login2.html?url=${window.location.href}`;
              }
              return;
            }
            //已经登录的情况
            //定义一个cart变量 存储 localStorage的cart属性的值
            let cart = localStorage.cart;
            console.log(cart);

            if (cart === undefined) {
              //没有创建购物车信息
              //直接添加当前商品信息
              //判断购买数量 符合 数值范围

              if (
                !(
                  $(".num").val() - 0 >= 1 &&
                  $(".num").val() - 0 <= res.goods_number
                )
              ) {
                alert("您输入的数值不符合库存范围");
                return;
              }

              //符合数量范围 给res添加购买数量属性值
              res.num = $(".num").val() - 0;
              //购买状态
              res.buy = true;

              //将商品信息转化为json字符串存储
              localStorage.cart = JSON.stringify([res]);
              //购物车数据信息已经存在
            } else {
              cart = JSON.parse(cart);
              //如果购车 是一个空数组
              if (cart.length === 0) {
                //直接添加商品信息
                if (
                  !(
                    $(".num").val() - 0 >= 1 &&
                    $(".num").val() - 0 <= res.goods_number
                  )
                ) {
                  alert("您输入的数值不符合库存范围");
                  return;
                }
                //符合数量范围 给res添加购买数量属性值
                res.num = $(".num").val() - 0;
                //购买状态
                res.buy = true;
                localStorage.cart = JSON.stringify([res]);
              } else {
                //当前购物车不是空车
                //购物车里没有该商品 添加商品
                //购物车里面有该商品 添加数量
                //定义一个变量bool 判断当前要加入购物车的商品id在cart里面是否存在
                let bool = cart.some(function (val) {
                  return val.goods_id === res.goods_id;
                });
                //如果存在
                if (bool) {
                  //给对应的商品添加购买数量
                  //循环遍历cart 找到 goods_id相同的商品
                  //添加商品个数
                  for (let i = 0; i < cart.length; i++) {
                    if (cart[i].goods_id == res.goods_id) {
                      let numAdd = cart[i].num - 0 + ($(".num").val() - 0);
                      //判断添加新的数量之后 购买数量在正确的范围之内
                      if (!(numAdd >= 1 && numAdd <= cart[i].goods_number)) {
                        alert("你输入的商品有误");
                        return;
                      }
                      //将numAdd赋值给购买的商品数量值
                      cart[i].num = numAdd;
                      //将新的购物车数据再次设定给localStorage中的数据
                      localStorage.cart = JSON.stringify(cart);
                    }
                  }
                } else {
                  // 购物车里没有该商品
                  // 补充当前商品的购买数量和购买状态
                  //将新的对象写入到数组起始位置
                  //判断数量符合规范
                  console.log($(".num").val());
                  if (
                    !(
                      $(".num").val() - 0 >= 1 &&
                      $(".num").val() - 0 <= res.goods_number
                    )
                  ) {
                    alert("输入商品数量有误");
                    return;
                  }
                  //数量符合规范
                  res.num = $(".num").val() - 0;
                  res.buy = true;
                  cart.unshift(res);
                  localStorage.cart = JSON.stringify(cart);
                }
              }
            }
            window.location.href = "./cart2.html";
          }
        });
        //鼠标移动事件，放大镜显示
        //获取标签对象
        const oBox = document.querySelector(".detailLeft");
        const oShow = document.querySelector(".logoImg");
        const oMask = document.querySelector(".mask");
        const oImg = document.querySelector(".logoImg img");
        const oGlass = document.querySelector(".glass");
        //定位值
        const showLeft = oBox.offsetLeft;
        const showTop = oBox.offsetTop;
        //边框
        const showBorLeft = oShow.clientLeft;
        const showBorTop = oShow.clientTop;
        //mask的宽高,由于mask是隐藏的，需要通过样式获取他的宽高
        const oMaskWidth = parseInt(window.getComputedStyle(oMask).width);
        const oMaskHeight = parseInt(window.getComputedStyle(oMask).height);
        //show 内容+padding
        const showWidth = oShow.clientWidth;
        const showHeight = oShow.clientHeight;
        //绑定事件
        setMoveLeave();
        function setMoveLeave() {
          oShow.addEventListener("mousemove", function () {
            oMask.style.display = "block";
            oGlass.style.display = "block";
          });
          oShow.addEventListener("mouseleave", function () {
            oMask.style.display = "none";
            oGlass.style.display = "none";
          });
        }
        //鼠标移动，放大镜跟随鼠标
        setMouseMove();
        function setMouseMove() {
          oShow.addEventListener("mousemove", function (e) {
            //获取鼠标x y 的值
            let x = e.pageX - showLeft - showBorLeft - oMaskWidth / 2;
            let y = e.pageY - showTop - showBorTop - oMaskHeight / 2;
            //判断极值
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;
            x = x > showWidth - oMaskWidth ? showWidth - oMaskWidth : x;
            y = y > showHeight - oMaskHeight ? showHeight - oMaskHeight : y;
            //将x y 值写入mask的定位值
            oMask.style.left = x + "px";
            oMask.style.top = y + "px";
            oGlass.style.backgroundPosition = `-${3 * x}px -${3 * y}px`;
          });
        }
      });
    </script>
  </body>
</html>
